<template>
  <div class="login-way">
    <a-row class="login-way-home">
      <a-tooltip placement="top">
        <template #title>
          <span>{{ $t('login.login.loginWay.home') }}</span>
        </template>
        <i class="iconfont icon-q-a-zhuyeshouye1" @click="toIndex"></i>
      </a-tooltip>
    </a-row>
    <a-form>
      <a-row
          type="flex"
          justify="center"
          align="top"
          class="login-way-content">
        <a-col :span="17" class="login-way-box">
          <a-row type="flex" align="bottom" class="login-signUp">
            <a-col :span="8" class="login-way-box-title">{{ $t('login.login.loginWay.signIn') }}</a-col>
            <a-col :span="16" class="login-way-box-signUp">
              <span class="">{{ $t('login.login.loginWay.noAccount') }}</span>
              <span class="login-way-box-signUp-do">{{ $t('login.login.loginWay.clickSignUp') }}</span>
            </a-col>
          </a-row>
          <a-row type="flex">
            <!--  账号输入 -->
            <a-input
                class="login-input"
                v-model:value="form.account"
                size="large"
                :placeholder="loginWay ? $t('login.login.loginWay.accountPlaceholder2') : $t('login.login.loginWay.accountPlaceholder1')" />
          </a-row>
          <a-row type="flex">
            <!--  密码输入 -->
            <a-input-password
                v-if="!loginWay"
                class="login-input"
                v-model:value="form.password"
                size="large"
                autocomplete="on"
                :placeholder="$t('login.login.loginWay.pwdPlaceholder1')" />
            <a-input-group compact v-if="loginWay" class="login-input login-input-group" autocomplete="on">
              <a-input
                  v-model:value="form.password"
                  style="width: calc(100% - 112px)"
                  size="large"
                  autocomplete="on"
                  :placeholder="$t('login.login.loginWay.pwdPlaceholder2')"/>
              <a-button size="large" style="width: 112px;" disabled>
                {{ $t('login.login.loginWay.sendVer')}}
              </a-button>
            </a-input-group>
          </a-row>
          <a-row class="login-input" type="flex" justify="space-between" align="middle">
            <a-col>
              <!-- 记住我 -->
              <a-checkbox class="login-check" v-model:checked="checked">
                {{ $t('login.login.loginWay.rebme') }}
              </a-checkbox>
            </a-col>
            <a-col>
              <!-- 修改登录方式 -->
              <a-button type="text" class="login-msglogin" @click="changeLogin">
                {{ this.loginWay ? $t('login.login.loginWay.acLogin') : $t('login.login.loginWay.msgLogin') }}
              </a-button>
            </a-col>
          </a-row>
          <a-row class="login-input" type="flex">
            <a-button
                @click="signIn"
                size="large" block
                :disabled="loginWay">
              {{ $t('login.login.loginWay.signIn') }}
            </a-button>
          </a-row>
          <a-row class="login-input" type="flex" justify="space-around" align="middle">
            <a-button type="text" class="login-msglogin" disabled>
              {{ $t('login.login.loginWay.forgetPwd') }}
            </a-button>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  import { message } from 'ant-design-vue'
  import { loginApi } from '@/api/login/login'
  import { useRouter } from 'vue-router'
  import base64 from '@/utils/security/base64'
  export default {
    name: 'LoginWay',
    data () {
      return {
        form: {
          account: '',
          password: ''
        },
        checked: false,
        loginWay: false, // 登录方式。false，常规登录，true 短信登录
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.checkStatus()
      })
    },
    methods: {
      changeLogin () {
        this.loginWay = !this.loginWay
        if (this.loginWay) {
          this.form =  {
            account: '',
            password: ''
          }
        } else {
          this.checkStatus()
        }
      },
      /**
       * 检查登录状态
       */
      checkStatus () {
        const loginCache = localStorage.getItem('LOGIN_CACHE')
        if (loginCache) {
          this.checked = true
          const ac = JSON.parse(base64.decode(loginCache))
          this.form.account = base64.decode(ac.account)
          this.form.password = base64.decode(ac.password)
        } else {
          this.checked = false
        }
      },
      /**
       * 登录方法
       */
      signIn () {
        const that = this
        this.changeLoadingStatus()
        loginApi.login({
          'account': 'YWRtaW4=',
          'password': 'MTIzNDU2',
          'loginType': '0'
        }).then((res) => {
          if(res.code === 1000 && res.success) {
            that.$store.dispatch(
              'login/login',
              {
                'routes' : that.$router.getRoutes(),
                ...res.data
              }).then((res) => {
                // 记住我设置
                if (this.checked) {
                  const ac = {
                    account: base64.encode(this.form.account),
                    password: base64.encode(this.form.password)
                  }
                  localStorage.setItem('LOGIN_CACHE', base64.encode(JSON.stringify(ac)))
                } else {
                  localStorage.removeItem('LOGIN_CACHE')
                }
                this.changeLoadingStatus()
                that.$router.push({
                  path: '/defaultPage'
                })
              })
            message.success('登录成功')
          } else {
            this.changeLoadingStatus()
            message.error(res.message);
          }
          console.log(res, 'res');
        }).catch(err => {
          this.changeLoadingStatus()
        })

      }
    },
    inject: ['changeLoadingStatus'],
    setup() {
      const router = useRouter()
      const toIndex = function () {
        router.push({
          path: '/'
        })
      }

      return {
        toIndex
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-way{
    height: 100%;
    .login-way-home {
      padding-top: 10px;
      padding-left: 10px;
      .icon-q-a-zhuyeshouye1{
        font-size: 30px;
        cursor: pointer;
        &:hover{
          color: #3a485a;
        }
      }
    }
    .login-way-content{
      height: 58%;
      .login-way-box{
        height: 100%;
        .login-way-box-title{
          text-align: left;
          color: #40485B;
          font-size: 24px;
          font-width: 900;
        }
        .login-signUp{
          margin-bottom: 8px;
        }
        .login-way-box-signUp{
          font-size: 14px;
          color: #40485B;
          font-size: 700;
          text-align: right;
          .login-way-box-signUp-do{
            cursor: pointer;
            color: #23597D;
            &:hover{
              color: #1283ba;
            }
          }
        }
        .login-input{
          margin-top: 20px;
          .login-msglogin{
            color: #23597D;
            cursor: pointer;
            background: rgba(0, 0, 0, 0);
            &:hover {
              color: #1283ba;
              background: rgba(0, 0, 0, 0);
            }
          }
          .login-check{
            :deep(.ant-checkbox-checked) {
              .ant-checkbox-inner{
                background: #23597D;
                border-color: #23597D;
              }
            }
          }
        }
        .login-input-group {
          width: 100%;
        }
      }
    }
  }
</style>
